<template>
    <div :loading="loading" class=" bg-white p-4 rounded">
        <el-form :model="form" label-width="160px">
            <el-tabs v-model="active" type="card" tab-position="top" @tab-click="">
                <el-tab-pane label="支付设置" name="first">
                    <el-table :data="tableData" border stripe>
                        <el-table-column label="支付方式" align="left">
                            <template #default="{ row }">
                                <div class="flex">
                                    <el-image :src="row.src" fit="fill" :lazy="true" style="width: 40px; height: 40px;"
                                        class="rounded mr-2"></el-image>
                                    <div>
                                        <h6>{{ row.name }}</h6>
                                        <small class="flex text-gray-500 mt-1">{{ row.desc }}</small>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="150">
                            <template #default="{ row }">
                                <el-button type="primary" size="small" text @click="open(row.key)">配置</el-button>

                            </template>
                        </el-table-column>
                    </el-table>

                </el-tab-pane>
                <el-tab-pane label="购物设置" name="second">
                    <!-- <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" > -->
                        <el-form-item label="未支付订单" >
                            <div>
                                <el-input  v-model="form.auto_received_day"   class="px-4"   >
                                <template #append>
                                    <div>
                                        分钟后自动关闭
                                    </div>
                                </template>
                            </el-input>
                            <p class="text-gray-500 ">订单下单未付款，n分钟后自动关闭，设置0不自动关闭</p>
                            </div>


                        </el-form-item>
                        <el-form-item label="已发货订单">
                            <div>
                                <el-input  v-model="form.close_order_minute" size="normal" >
                                <template #append>
                                    <div>
                                        天后自动确认收货
                                    </div>
                                </template>
                            </el-input >
                            <p class="text-gray-500 ">订单下单未确认收货，n分钟后自动收货，设置0不自动收货</p>
                            </div>


                        </el-form-item>
                        <el-form-item label="已完成订单">
                            <div>

                                <el-input v-model="form.after_sale_day" size="normal" class="px-4" >
                                <template #append>
                                    <div>
                                        天允许申请售后
                                    </div>
                                </template>
                            </el-input>
                            <p class="text-gray-500 ">订单完成后，用户在n天内可以发售后申请，设置0不允许</p>

                            </div>

                        </el-form-item>
                    <!-- </el-form> -->



                    <!-- <el-form-item label="Bucket">
                        <el-input v-model="form.upload_config.Bucket" placeholder="Bucket" size="normal" style="width: 25%;"
                            type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="ACCESS_KEY">
                        <el-input v-model="form.upload_config.ACCESS_KEY" size="normal" style="width: 25%;"
                            type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="SECRET_KEY">
                        <el-input v-model="form.upload_config.SECRET_KEY" size="normal" style="width: 25%;"
                            type="password"></el-input>
                    </el-form-item>

                    <el-form-item label="命名空间">
                        <el-input v-model="form.upload_config.http" placeholder="http" size="normal"
                            style="width: 25%;"></el-input><span class="text-gray-500 ">请补全http://或者https://</span>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button :loading=loading type="primary" size="default" @click="submit">保存</el-button>

                    </el-form-item>
                </el-tab-pane>

            </el-tabs>


        </el-form>

        <FormDrawer ref="FormDrawerRef" title="配置" @submit="submit">
            <el-form v-if="drawerType == 'alipay'" :model="form" label-width="80px">
                <el-form-item label="app_id">
                    <el-input v-model="form.alipay.app_id" placeholder="app_id" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="ali_public_key">
                    <el-input v-model="form.alipay.ali_public_key" placeholder="ali_public_key" style="width: 90%;"
                        type="textarea" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="private_key">
                    <el-input v-model="form.alipay.private_key" placeholder="private_key" style="width: 90%;"
                        type="textarea" rows="4"></el-input>
                </el-form-item>
            </el-form>
            <el-form v-if="drawerType == 'wxpay'" :model="form" label-width="80px">
                <el-form-item label="公众号 APPID">
                    <el-input v-model="form.wxpay.app_id" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="小程序 APPID">
                    <el-input v-model="form.wxpay.miniapp_id" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="小程序secret">
                    <el-input v-model="form.wxpay.secret" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="appid">
                    <el-input v-model="form.wxpay.appid" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="商户号">
                    <el-input v-model="form.wxpay.mch_id" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="API 密钥">
                    <el-input v-model="form.wxpay.key" style="width: 90%;"></el-input>
                </el-form-item>
                <el-form-item label="cert_client">
                    <el-upload v-model:file-list="fileList" class="upload-demo" :action="uploadAction" :limit="1"
                        accept=".pem" :headers="{
                            token
                        }" :on-success="uploadClientSuccess">
                        <el-button type="primary">Click to upload</el-button>
                        <template #tip>
                            <p class="text-red-500">{{ form.wxpay.cert_client ? form.wxpay.cert_client : '还未配置' }}</p>
                            <div class="el-upload__tip">
                                描述...
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="cert_key">
                    <el-upload v-model:file-list="fileList" class="upload-demo" :action="uploadAction" :limit="1"
                        accept=".pem" :headers="{
                            token
                        }" :on-success="uploadKeySuccess">
                        <el-button type="primary">Click to upload</el-button>
                        <template #tip>
                            <p class="text-red-500">{{ form.wxpay.cert_key ? form.wxpay.cert_key : '还未配置' }}</p>
                            <div class="el-upload__tip">
                                描述...cert_key
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </FormDrawer>

    </div>
</template>
<script setup>
import { getSysconfig, setSysconfig, uploadAction } from '~/api/sysconfig.js'
import { reactive, ref } from 'vue'
import { toast } from '~/composables/util.js'
import FormDrawer from '~/components/FormDrawer.vue'
import { getToken } from '~/composables/auth'
const token = getToken()
const active = ref('first')
const tableData = [{
    name: "支付宝支付",
    desc: "该系统支付即时到账接口",
    src: '/alipay.png',
    key: 'alipay'
}, {
    name: "微信支付",
    desc: "该系统支持微信网页支付和扫码支付",
    src: '/wepay.png',
    key: 'wxpay'
}]
const form = reactive({
    "api_safe": 1,
    "api_secret": "",
    "close_order_minute": 0,
    "auto_received_day": 0,
    "after_sale_day": 0,
    "alipay": {
        "app_id": "",
        "ali_public_key": "",
        "private_key": ""
    },
    "wxpay": {
        "app_id": "",       // 公众号 APPID
        "miniapp_id": "",   // 小程序 APPID
        "secret": "",       // 小程序secret
        "appid": "",        // appid
        "mch_id": "",       // 商户号
        "key": "",          // API 密钥
        "cert_client": "",
        "cert_key": ""
    }
})
//获取数据并且刷新
const loading = ref(false)
function getData() {
    loading.value = true
    getSysconfig()
        .then(res => {
            for (const k in form) {
                // 把响应回来数据的指定key赋值给form的指定key值
                form[k] = res[k];
            }
            // 把字符串进行逗号分割编程数组
            form.password_encrypt = form.password_encrypt.split(",")
            console.log(res);
        })
        .finally(() => {
            loading.value = false
        })
}
getData()

const submit = () => {
    loading.value = true
    //把数组作为字符串传递参数使用join
    setSysconfig({
        ...form,
    }).then(res => {
        toast('修改成')
        getData()
    }).finally(() => {
        loading.value = false
    })
}

const drawerType = ref('alipay')
const FormDrawerRef = ref(null)
const open = (key) => {
    drawerType.value = key
    FormDrawerRef.value.open()
}

function uploadClientSuccess(response, uploadFile, uploadFiles) {
    form.wxpay.cert_client = response.data
}

function uploadKeySuccess(response, uploadFile, uploadFiles) {
    form.wxpay.cert_key = response.data
}
</script>